* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
    float: left;
    box-shadow: 0px -5px 10px white, 0px 5px 10px rgb(177, 177, 177);
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bgBox {
    width: 1156px;
    height: 506px;
    background-color: #f2f2f2;
}

.keyboardBox {
    width: 867px;
    height: 354px;
}

.row {
    margin: 8px auto;
    float: left;
}

.row li {
    width: 48px;
    height: 40px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f2f2f2;
    margin: 8px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.row li img {
    width: 15px;
    height: 16px;
}

.row li:hover{
    box-shadow: 0px -1px 3px #f2f2f2, 0px 2px 1px rgb(177, 177, 177);
}

/* 第一行 */
.row_A .esc {
    width: 51px;
    height: 38px;
    background-color: #fb3b6a;
    border: 1px solid #bc5d73;
}

.row_A .back {
    width: 80px;
    background-color: #fffcad;
}

/* 第二行 */
.row_B .tab {
    width: 80px;
    background-color: #a4f7c1;
}

/* 第三行 */
.row_C .caps {
    width: 96px;
    background-color: #9beaee;
}

.row_C .enter {
    width: 96px;
    background-color: #f986bd;
}

/* 第四行 */
.row_D .shiftLeft {
    width: 128px;
    background-color: #fecd19;
}

.row_D .shiftRight {
    width: 128px;
    background-color: #8793e5;
}

/* 第五行 */
.row_E li {
    width: 80px;
    background-color: #fcafff;
}
.row_E .kg {
    width: 390px;
    background-color: #f2f2f2;
}